<template>
  <div class="shop">
    <Launch class="shop__launch"></Launch>
    <!-- 搜索图 -->
    <Search></Search>
    <!-- 促销活动 -->
    <BoxSkin class="shop__promotion" pt-10 pb-10 px-10>
      <Magazine
        :image="item.image"
        bor-4
        v-for="item in promotions"
        :key="item.id"
        class="shop__promotion__item"
        @click="goToUrl(item.url)"
      >
        <div text-tertiary>{{ item.title }}</div>
      </Magazine>
    </BoxSkin>
    <!-- 导航栏 -->
    <Navlist :list="categorys"></Navlist>
    <!-- 商品列表 流式布局 -->
    <Brand :list="BrandVideos"></Brand>
    <!-- 快捷导航 -->
    <Fastnav></Fastnav>
  </div>
</template>

<script setup>
import Magazine from "@/components/magazine/Magazine.vue";
import Launch from "@/components/launch/Launch.vue";
import Banner from "@/common/banner.vue";
import Brand from "@/common/brand.vue";
import Search from "@/common/search.vue";
import Navlist from "@/common/navlist.vue";
import Fastnav from "@/common/fastnav.vue";
import BoxSkin from "@/components/box-skin/BoxSkin.vue";

import {
  getRecommendatoryCategorys,
  getBanners,
  getBrandVideos,
  getPromotions,
} from "@/api/mall";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const banners = ref([]);
const categorys = ref([]);
const BrandVideos = ref([]);
const promotions = ref([]);
onMounted(() => {
  getPromotions().then((res) => {
    promotions.value = res.data;
  });
  getRecommendatoryCategorys().then((res) => {
    categorys.value = res.data;
  });
  getBanners().then((res) => {
    banners.value = res.data;
  });
  getBrandVideos().then((res) => {
    BrandVideos.value = res.data[0].list.concat(res.data[1].list);
  });
});
const goToUrl = (url) => {
  router.push("/css-architecture-mogujie/promotion");
};
</script>
<style scoped lang="scss">
@include b(shop) {
  @include e(promotion) {
    display: flex;
    gap: 10px;
    @include e(item) {
      position: relative;
      width: 25%;
      height: 70px;
      > div {
        position: absolute;
        bottom: 5px;
        width: 100%;
        text-align: center;
      }
    }
  }
}
.shop__launch {
  position: sticky;
  top: 0;
  z-index: 111;
}
</style>
